<template>
  <div class="lix-container">
    <div class="lix-index__header">
      <a href="/pages/index/selectcity" class="lix-index__left-header">
        <image src="../../static/image/location.png" />
        <p>{{ defaultCounty }}</p>
      </a>
      <a href="/pages/index/search" class="lix-index__right-header">
        <div>
          <image src="../../static/image/search.png"/>
          <p>请输入关键字</p>
        </div>
      </a>
    </div>
    <div class="lix-index__banner">
      <swiper class="" :indicator-dots="true" :autoplay="true" interval="3000" duration="1000">
        <swiper-item v-for="(item, idx) in banner" :key="idx">
          <navigator :url="'/pages/index/courseDetail?classid=' + item.id">
            <image :src="item.thumb" mode="aspectFit"/>
          </navigator>
        </swiper-item>
      </swiper>
    </div>
    <div class="lix-index__menu">
      <navigator v-for="(item, idx) in menu" :key="idx" :url="'/pages/index/category?id=' + item.id">
        <img :src="item.src" />
        <p>{{ item.key }}</p>
      </navigator>
    </div>
    <div class="lix-index__ad">
      <navigator v-for="(item, idx) in adList" :key="idx" :url="idx === 0 ? '/pages/index/schoolList' : '/pages/index/teacherList'">
        <image :src="item.thumb" />
      </navigator>
    </div>
    <div class="lix-index__list" v-for="(mainItem, mainIdx) in course" :key="mainIdx">
      <div class="lix-index__seperate"></div>
      <div class="lix-index__list--header">
        <p>{{ mainItem.name }}</p>
        <navigator :url="'/pages/index/category?id=' + mainItem.id">
          <p>更多</p>
          <image src="../../static/image/arrow_down.png"/>
        </navigator>
      </div>
      <div class="lix-index__list--banner">
        <navigator :url="'/pages/index/courseDetail?classid=' + mainItem.banner.id">
          <image :src="mainItem.banner.banner"/>
          <p class="zan-ellipsis">{{ mainItem.banner.title }}</p>
        </navigator>
      </div>
      <div class="lix-index__listwrap">
        <div class="lix-index__item" v-for="(item, idx) in mainItem.data" :key="idx">
          <navigator :url="'/pages/index/courseDetail?classid=' + item.id">
            <image :src="item.thumb"/>
            <p class="zan-ellipsis--l2">{{ item.title }}</p>
          </navigator>
       </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import request from '../../utils/wxRequest';
import { HOME_GET_CONFIG, HOME_GET_COURSE, USER_GET_INFO } from '../../store/mutation-types';

export default {
  computed: {
    ...mapGetters('city', {
      defaultCounty: 'defaultCounty',
      currentCityCode: 'currentCityCode',
      code: 'code'
    }),
    ...mapGetters('home', {
      banner: 'broadcast',
      adList: 'recommend',
      course: 'course'
    })
  },
  onLoad() {
    console.log('主页启动了');

    request.beforeAction()
      .then(token => {
        console.log(this.$store);
        this.getHomeConfig();
        console.log(typeof (this.currentCityCode));

        // 在有地域code的时候，增加地级市编码参数
        let code = '';
        if (this.currentCityCode.length > 0) {
          code = this.currentCityCode;
        }
        this.getHomeCourse({
          code: code
        });
        this.getUserInfo();
      });
  },
  watch: {
    currentCityCode: function(newValue, oldValue) {
      console.log('首页获取列表属性变动');
      console.log(newValue);
      console.log(oldValue);
      this.getHomeCourse({
        code: newValue
      });
    },
    code: function(newValue, oldValue) {
      console.log('首页 code 属性变动');
      console.log(newValue);
      console.log(oldValue);
      this.getHomeCourse({
        code: newValue
      });
    }
  },
  data() {
    return {
      menu: [
        {id: 1, key: '书法绘画', src: '../../static/image/icon-01.png'},
        {id: 2, key: '英语口才', src: '../../static/image/icon-02.png'},
        {id: 3, key: '舞蹈跆拳', src: '../../static/image/icon-03.png'},
        {id: 4, key: '音乐戏剧', src: '../../static/image/icon-04.png'},
        {id: 5, key: '国象围棋', src: '../../static/image/icon-05.png'},
        {id: 6, key: '科学探索', src: '../../static/image/icon-06.png'},
        {id: 7, key: '学科辅导', src: '../../static/image/icon-07.png'},
        {id: 8, key: '亲子活动', src: '../../static/image/icon-08.png'}
      ]
    };
  },
  onPullDownRefresh() {
    request.beforeAction()
      .then(token => {
        this.getHomeConfig();

        // 在有地域code的时候，增加地级市编码参数
        let code = '';
        if (this.currentCityCode.length > 0) {
          code = this.currentCityCode;
        }
        this.getHomeCourse({
          code: code
        }).then((res) => {
          wx.stopPullDownRefresh();
        });

        this.getUserInfo();
      });
  },
  methods: {
    ...mapActions('home', {
      getHomeConfig: HOME_GET_CONFIG,
      getHomeCourse: HOME_GET_COURSE
    }),
    ...mapActions('user', {
      getUserInfo: USER_GET_INFO
    })
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/index.scss";
</style>
